<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>百度换肤</title>
    <script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        li {
            list-style-type: none;
        }
        
        #box {
            overflow: hidden;
            margin: 200px auto;
            background-color: #fff;
            width: 608px;
            padding-top: 3px;
        }
        
        #box ul {
            margin: 0 auto;
        }
        
        #box li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        #box img {
            width: 150px;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div>test</div>
</body>
<script>
    $("#box ul").each(function() {
        $(this).find("li").each(function(index) {
            $img = $('<img  />');
            $img.attr('src', 'images/' + (index + 1) + '.jpg');
            $(this).append($img);
            $(this).click(function(index) {
                var vsrc = $(this).find('img').attr('src');
                $("body").css('background', 'url(' + vsrc + ') no-repeat center top');
            });
            $(this).mouseenter(function() {
                $(this).find('img').animate({
                    width: "200px"
                })
            });
            $(this).mouseleave(function() {
                $(this).find('img').animate({
                    width: "150px"
                })
            })
        })
    })

    var u = document.getElementsByTagName("li");
    console.log(u.length);
    var box = document.getElementById("box");
    var ch = box.childNodes;
    console.log(ch)
</script>

</html>